GermanWikipedia - /page/entry.mu

Micron Document

<!DOCTYPE html>

<title>Dynamisches HTML</title>

</head>

<h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Dynamisches HTML</span></h1>

</header>

</div>

<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="de" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="de" dir="ltr"><p>Die Begriffe <b>DHTML</b>, <b>dynamisches <a href="Hypertext_Markup_Language" title="Hypertext Markup Language">HTML</a></b> (<span style="font-style:normal;font-weight:normal"><a href="Englische_Sprache" title="Englische Sprache">englisch</a></span> <span lang="en-Latn" style="font-style:italic">dynamic HTML</span>) oder auch <b><a href="Document_Object_Model" title="Document Object Model">DOM</a>-Scripting</b> bezeichnen bestimmte <a href="Webdesign" title="Webdesign">Webdesign</a>-Methoden, bei denen während der Anzeige einer Webseite diese selbst, ausgelöst durch Ereignisse wie z. B. Benutzereingaben, verändert wird.

</p><p>Der Begriff „dynamisch“ bezieht sich dabei auf die Idee, dass diese Ereignisse auch mehrfach beim Anzeigen einer Seite auftreten können.

</p><p>Beispiele für dynamische Anzeigeeffekte sind:

</p>

<ul><li>das Erscheinen („Aufklappen“) eines <a href="Men%C3%BC_(Computer)" title="Menü (Computer)">Menüs</a></li>

<li>die Hervorhebung eines Textes</li>

<li>die Möglichkeit, Objekte durch <a href="Drag_and_Drop" title="Drag and Drop">Drag & Drop</a> auf dem Bildschirm zu verschieben</li>

<li>Formularfelder automatisch in Abhängigkeit von anderen Feldern zu belegen</li>

<li>Effekte wie bei clientseitigen <a href="Anwendungssoftware" title="Anwendungssoftware">Anwendungsprogrammen</a></li></ul>

<div class="mw-heading mw-heading2"><h2 id="Geschichte">Geschichte</h2></div>

<p>Die Skriptsprachen <a href="JavaScript" title="JavaScript">JavaScript</a> im <a href="Netscape_Navigator" title="Netscape Navigator">Netscape Navigator</a> und <a href="JScript" title="JScript">JScript</a> im Microsoft <a href="Internet_Explorer" title="Internet Explorer">Internet Explorer</a> ermöglichten schon Mitte der <a href="1990er" title="1990er">1990er</a> Jahre die ereignisbasierte Veränderung von Webseiten. Damals wurde der Begriff DHTML benutzt, um auf diese Fähigkeiten der damaligen Programmversionen hinzuweisen. Durch die Standardisierung des <a href="Document_Object_Model" title="Document Object Model">Document Object Model</a> und das Platzen der damaligen <a href="Dotcom-Blase" title="Dotcom-Blase">Dotcom-Blase</a> geriet der Begriff aus der Mode.

</p>

<div class="mw-heading mw-heading2"><h2 id="Techniken">Techniken</h2></div>

<p>Dynamisches HTML umfasst die folgenden Techniken:

</p>

<ul><li><a href="Hypertext_Markup_Language" title="Hypertext Markup Language">HTML</a> zum Verfassen von Dokumenten</li>

<li>eine <a href="Client" title="Client">clientseitige</a> <a href="Skriptsprache" title="Skriptsprache">Skriptsprache</a>, meistens <a href="JavaScript" title="JavaScript">JavaScript</a></li>

<li>eine Schnittstelle zur Änderung und Erweiterung des HTML-Dokuments, heute wird vor allem das <a href="Document_Object_Model" title="Document Object Model">Document Object Model</a> (DOM) verwendet</li>

<li><a href="XMLHttpRequest" title="XMLHttpRequest">XMLHttpRequest</a>, um Daten zwischen dem Browser und einem entfernten <a href="Hypertext_Transfer_Protocol" title="Hypertext Transfer Protocol">HTTP</a>-Server auszutauschen (siehe auch <a href="Ajax_(Programmierung)" title="Ajax (Programmierung)">Ajax</a>).</li>

<li>Fetch API, um Daten zwischen dem Browser und einem entfernten <a href="Hypertext_Transfer_Protocol" title="Hypertext Transfer Protocol">HTTP</a>-Server auszutauschen.</li>

<li>ein Format zur Übertragung strukturierter Daten, etwa <a href="Extensible_Markup_Language" title="Extensible Markup Language">XML</a> oder auch <a href="JavaScript_Object_Notation" class="mw-redirect" title="JavaScript Object Notation">JSON</a></li></ul>

<p>Dabei müssen nicht unbedingt alle Techniken dieser Liste in einem Dokument verwendet werden (insbesondere die zur Datenübertragung nach dem ersten Laden nicht), um es als Anwendung von dynamischem HTML bezeichnen zu können.

</p>

<div class="mw-heading mw-heading2"><h2 id="Beispiele">Beispiele</h2></div>

<p>Ein einfaches Beispiel eines dynamischen HTML-Abschnitts, bei dem sich der dargestellte Text beim Anklicken verändert:

</p>

<div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span>...

<span class="p"><</span><span class="nt">p</span> <span class="na">onclick</span><span class="o">=</span><span class="s">"this.firstChild.nodeValue = 'Danke'"</span><span class="p">></span>Klick mich<span class="p"></</span><span class="nt">p</span><span class="p">></span>

...

</pre></div>

<div class="mw-heading mw-heading2"><h2 id="Kritik_und_Nachteile">Kritik und Nachteile</h2></div>

<p>Oft wird dynamisches HTML für effekt-orientierte Funktionen verwendet, bei denen der Nutzen nicht klar erkennbar ist und die eher stören.

</p><p>In der Anfangszeit konnte DHTML nur über <a href="Webbrowser" title="Webbrowser">Browser</a>-spezifische sogenannte <i>DHTML-Modelle</i> realisiert werden, die nicht zueinander kompatibel waren. Daher führten einige DHTML-Seiten unter bestimmten Browsern zu Fehlern. Dieser Ruf hängt dynamischem HTML bis heute an. Daher wird heute auch der Begriff <i>DOM Scripting</i> verwendet, mit dem man standardkonformes DHTML von Browser-spezifischen Varianten abgrenzen möchte.

</p><p>Dynamisches HTML stellt teils hohe Anforderungen an die JavaScript-Fähigkeiten des Browsers, die nur von den neueren Browsergenerationen erfüllt werden. Wenn die Verwendung von JavaScript, z. B. aus Sicherheitsgründen, deaktiviert wird, kann dynamisches HTML nicht verwendet werden. Darüber hinaus kann sich die Zugänglichkeit für Anwender verschlechtern, die wegen körperlichen Einschränkungen auf alternative Eingabe- bzw. Ausgabemethoden zurückgreifen müssen (siehe <a href="Barrierefreies_Internet" title="Barrierefreies Internet">Barrierefreies Internet</a>). Es ist aber möglich, dynamisches HTML so zu verwenden, dass es nur bei Browsern verwendet wird, die damit auch umgehen können. Die übrigen Anwender können die Website dann verwenden, als ob diese gar kein dynamisches HTML einsetzen würde.

</p>

<div class="mw-heading mw-heading2"><h2 id="Weblinks">Weblinks</h2></div>

<ul><li><a rel="nofollow" class="external text" href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials">Tutorials für Anfänger und Schritt-für-Schritt-Anleitungen für konkrete Problemstellungen</a> im <a href="SELFHTML" class="mw-redirect" title="SELFHTML">SELFHTML</a>-Wiki</li></ul></div><div><div class="zim-footer">

Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2024-12-21" href="https://de.wikipedia.org/wiki/?title=Dynamisches_HTML&oldid=251452096">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.

</div>

</div></div>

</div>

</main>

</div>

</body></html>